<template>
	<div class="userbox">
		<el-steps :active="step" finish-status="success" align-center>
			<el-step :title="$t('short_data.step.drama')"></el-step>
			<el-step :title="$t('short_data.step.episode')"></el-step>
			<el-step :title="$t('short_data.step.confirm')"></el-step>
		</el-steps>
		<div class="formdata" v-show="step==0||step==2">
			<el-form :model="form" :rules="rules" ref="brandForm" label-width="auto" label-position="right">
				<div class="left-side">
					<el-form-item :label="$t('short_data.form.shortName')" prop="shortName.en_US" >
						<el-input v-model="form.shortName.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="shortName.ja_JP" >
						<el-input v-model="form.shortName.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="shortName.zh_CN" >
						<el-input v-model="form.shortName.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="shortName.zh_TW" >
						<el-input v-model="form.shortName.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.shortLanguage')" prop="shortLanguage" >
						<el-input type="text" v-model="form.shortLanguage" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('short_data.video.series')" prop="category">
						<el-select v-model="form.category" :disabled="disabled">
							<el-option v-for="item in categoryList" :key="item.id" :label="setTitle(item.title)" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('short_data.video.isLimit')" prop="isLimit" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-switch v-model="form.isLimit" style="margin-right: 50px" :disabled="disabled"></el-switch>
						</div>
					</el-form-item>
					<el-form-item :label="$t('short_data.video.category')" prop="tags">
						<el-select v-model="tags" :disabled="disabled" multiple @change="changeTags">
							<el-option v-for="item in tagsList" :key="item.id" :label="setTitle(item.tagName)" :value="item.tagId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('short_data.video.type')" prop="vhType">
						<el-select v-model="form.vhType" :disabled="disabled">
							<el-option v-for="item in vhTypeList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('short_data.video.movieType')" prop="movieGenreId">
						<el-select v-model="form.movieGenreId" :disabled="disabled">
							<el-option v-for="item in movTypeList" :key="item.value" :label="setTitle(item.movieGenreName)" :value="item.movieGenreId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.originalDate')" prop="originalDate" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.originalDate" type="date" value-format="YYYY-MM-DD" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.isWarnings')" prop="isWarnings" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-switch v-model="form.isWarnings" style="margin-right: 50px" :disabled="disabled"></el-switch>
						</div>
					</el-form-item>
					<el-form-item :label="$t('short_data.video.duration')" prop="duration">
						<el-input type="number" v-model="form.duration" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.ageRating')" prop="ageRating" >
						<el-select v-model="form.ageRating" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled">
							<el-option
								v-for="item in ageRatingList"
								:key="item.type"
								:label="item.label"
								:value="item.type"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item :label="$t('short_data.form.status')" prop="status">
						<el-select v-model="form.status" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled">
							<el-option
								v-for="item in statusList"
								:key="item.type"
								:label="item.label"
								:value="item.type"
								>
							</el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item :label="$t('short_data.form.status')" prop="completed" >
						<el-select v-model="form.completed" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled">
							<el-option
								v-for="item in completedList"
								:key="item.type"
								:label="item.label"
								:value="item.type"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.uploadDay')" v-if="form.completed==1" prop="updateWeekday.en_US" >
						<div class="item-add">
							<el-input v-model="form.updateWeekday.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
							<el-popover
								placement="bottom"
								width="auto"
								trigger="click"
								v-if="!disabled">
								<div class="popBox">
									<div class="popBox-list" v-for="item in langKeyList" :key="item" @click="selName(item.type,4)">{{ item.name }}</div>
								</div>
								<template #reference>
									<el-icon class="detail-add"><component :is="oicon('el-icon-circle-plus')" /></el-icon>
								</template>
							</el-popover>
						</div>
					</el-form-item>
					<el-form-item label="&#12288;" prop="updateWeekday.ja_JP" v-if="form.completed==1&&form.updateWeekday&&form.updateWeekday.ja_JP!=null">
						<el-input v-model="form.updateWeekday.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="updateWeekday.zh_CN" v-if="form.completed==1&&form.updateWeekday&&form.updateWeekday.zh_CN!=null">
						<el-input v-model="form.updateWeekday.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="updateWeekday.zh_TW" v-if="form.completed==1&&form.updateWeekday&&form.updateWeekday.zh_TW!=null">
						<el-input v-model="form.updateWeekday.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
					
					<el-form-item :label="$t('short_data.form.episode')" prop="episode" >
						<el-input type="number" v-model="form.episode" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('short_data.video.productions')" prop="productions">
						<el-select v-model="productions" :filter-method="searchArea" filterable :disabled="disabled" multiple @change="changeProductions">
							<el-option v-for="item in productionsList" :key="item.id" :label="setTitle(item.productionName)" :value="item.productionId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.creatorId')" prop="createBy">
						<el-select v-model="form.createBy" filterable :filter-method="searchCreator" :placeholder="$t('formRule.selectPlaceholder')" @change="selectCreator" :disabled="disabled">
							<el-option v-for="item in creatorIdList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item :label="$t('short_data.form.director')" prop="directors.en_US" >
						<div class="item-add">
							<el-input v-model="form.directors.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
							<el-popover
								placement="bottom"
								width="auto"
								trigger="click"
								v-if="!disabled">
								<div class="popBox">
									<div class="popBox-list" v-for="item in langKeyList" :key="item" @click="selName(item.type,1)">{{ item.name }}</div>
								</div>
								<template #reference>
									<el-icon class="detail-add"><component :is="oicon('el-icon-circle-plus')" /></el-icon>
								</template>
							</el-popover>
						</div>
					</el-form-item>
					<el-form-item label="&#12288;" prop="directors.ja_JP" v-if="form.directors&&form.directors.ja_JP!=null">
						<el-input v-model="form.directors.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="directors.zh_CN" v-if="form.directors&&form.directors.zh_CN!=null">
						<el-input v-model="form.directors.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="directors.zh_TW" v-if="form.directors&&form.directors.zh_TW!=null">
						<el-input v-model="form.directors.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>

					<el-form-item :label="$t('short_data.form.writer')" prop="writers.en_US" >
						<div class="item-add">
							<el-input v-model="form.writers.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
							<el-popover
								placement="bottom"
								width="auto"
								trigger="click"
								v-if="!disabled">
								<div class="popBox">
									<div class="popBox-list" v-for="item in langKeyList" :key="item" @click="selName(item.type,2)">{{ item.name }}</div>
								</div>
								<template #reference>
									<el-icon class="detail-add"><component :is="oicon('el-icon-circle-plus')" /></el-icon>
								</template>
							</el-popover>
						</div>
					</el-form-item>
					<el-form-item label="&#12288;" prop="writers.ja_JP" v-if="form.writers&&form.writers.ja_JP!=null">
						<el-input v-model="form.writers.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="writers.zh_CN" v-if="form.writers&&form.writers.zh_CN!=null">
						<el-input v-model="form.writers.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="writers.zh_TW" v-if="form.writers&&form.writers.zh_TW!=null">
						<el-input v-model="form.writers.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
					
					<el-form-item :label="$t('short_data.form.cast')" prop="casts.en_US" >
						<div class="item-add">
							<el-input v-model="form.casts.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
							<el-popover
								placement="bottom"
								width="auto"
								trigger="click"
								v-if="!disabled">
								<div class="popBox">
									<div class="popBox-list" v-for="item in langKeyList" :key="item" @click="selName(item.type,3)">{{ item.name }}</div>
								</div>
								<template #reference>
									<el-icon class="detail-add"><component :is="oicon('el-icon-circle-plus')" /></el-icon>
								</template>
							</el-popover>
						</div>
					</el-form-item>
					<el-form-item label="&#12288;" prop="casts.ja_JP" v-if="form.casts&&form.casts.ja_JP!=null">
						<el-input v-model="form.casts.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="casts.zh_CN" v-if="form.casts&&form.casts.zh_CN!=null">
						<el-input v-model="form.casts.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="casts.zh_TW" v-if="form.casts&&form.casts.zh_TW!=null">
						<el-input v-model="form.casts.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>

					<el-form-item :label="$t('short_data.form.movieId')" prop="movieId" >
						<el-input type="text" v-model="form.movieId" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<!-- <el-form-item :label="$t('short_data.form.saleArea')" prop="saleArea">
						<el-select v-model="form.saleArea" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled" filterable>
							<el-option v-for="item in localeList" :key="item.country" :label="item[$i18n.locale]" :value="item.country">
							</el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item :label="$t('short_data.form.areaSwitch')" prop="restrictStatus" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-switch v-model="form.restrictStatus" style="margin-right: 50px" :inactive-text="$t('short_data.form.canView')" :active-text="$t('short_data.form.cannotView')" :inactive-value="1" :active-value="2" @change="changeAreaStatus" :disabled="disabled"></el-switch>
						</div>
					</el-form-item>
					<el-form-item v-if="form.restrictStatus==1" :label="$t('short_data.form.viewAreas')" prop="viewAreas">
						<el-checkbox v-model="selectAll" @change="handleSelectAllChange" style="margin-right: 50px" :disabled="disabled">{{ $t('short_data.form.earth') }}</el-checkbox>
						<el-select v-model="viewAreas" :placeholder="$t('formRule.selectPlaceholder')" multiple :disabled="disabled||selectAll" filterable :filter-method="searchViewArea" clearable @change="changeAreas">
							<el-option v-for="item in viewLocaleList" :key="item.countryCode" :label="item.countryName[$i18n.locale]" :value="item.countryCode">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-else :label="$t('short_data.form.viewNotAreas')" prop="viewAreas">
						<el-select v-model="viewAreas" :placeholder="$t('formRule.selectPlaceholder')" multiple :disabled="disabled" filterable :filter-method="searchViewArea" clearable @change="changeAreas">
							<el-option v-for="item in viewLocaleList" :key="item.countryCode" :label="item.countryName[$i18n.locale]" :value="item.countryCode">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.isPending')" prop="isPending" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-switch v-model="form.isPending" style="margin-right: 50px" :disabled="disabled" @change="changePending"></el-switch>
						</div>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.isShowAllEpisode')" prop="allEpisodesStatus" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-switch v-model="form.allEpisodesStatus" style="margin-right: 50px" :disabled="disabled"></el-switch>
						</div>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.startDate')" prop="startDate" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.startDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled||form.isPending" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="beforeOptions"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.endDate')" prop="endDate" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.endDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled||form.isPending" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="backOptions" :default-time="defaultTime"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.openDate')" prop="openDate" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.openDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="preSaleOptions"></el-date-picker>
					</el-form-item>
					
					<el-form-item :label="$t('short_data.form.currency')" prop="currency" >
						<el-select v-model="form.currency" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled">
							<el-option
								v-for="item in currencyType"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('short_data.video.gross')" prop="grossPrice" >
						<span>{{ (form.currency==2?'$':'￥')+form.grossPrice||0 }}</span>
					</el-form-item>
				</div>
				<div class="right-side">
					<el-form-item :label="$t('short_data.form.sort')" prop="sort">
						<el-input type="text" v-model="form.sort" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.discount')" prop="discount" >
						<div class="scrollbox" v-if="form.episode">
							<div style="display: flex;justify-content: space-between; width: 100%; margin-bottom: 20px" v-for="(item,index) in form.discount" :key="index">
								<!-- <el-select style="margin-right: 20px;" v-model="item.episodeNum" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled" @change="changeEips">
									<el-option
										v-for="item in disList[item.episodeNum]"
										:key="item.value"
										:label="item.name"
										:value="item.value"
										>
									</el-option>
								</el-select> -->
								<el-input type="number" v-model="item.episodeNum" :placeholder="$t('short_data.formLabel.episode')" :disabled="disabled" @blur="changeEips">
									<template v-slot:suffix>
										<div>
										</div>
									</template>
								</el-input>
								<span style="margin: 0 10px;">x</span>
								<el-input type="number" v-model="item.episodeRate" :placeholder="$t('short_data.formLabel.rebate')" :disabled="disabled">
									<template v-slot:suffix>
										<div>
											%
										</div>
									</template>
								</el-input>
								<span style="margin: 0 10px;">=</span>
								<el-input type="number" style="margin-right: 20px;" v-model.number="item.rebate" :placeholder="$t('short_data.formLabel.rebateNum')" :disabled="disabled"></el-input>
								<el-icon class="del" v-if="form.discount&&form.discount.length>1&&!disabled" @click="delDiscount(index)"><component :is="oicon('el-icon-delete')" /></el-icon>
							</div>
						</div>
						<el-button icon="el-icon-circle-plus" @click="addDiscount" v-if="form.episode&&showAddBtn&&!disabled">{{ $t('short_data.form.addBtn') }}</el-button>
						<span class="tips" v-if="!form.episode">{{ $t('short_data.video.selectEpisodeTips') }}</span>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.coverPicture')" prop="coverPictureId">
						<div class="picbox">
							<div class="homeposter">
								<sc-upload v-model="form.coverPicture" title="Upload" :disabled="disabled" :action="action" @getFile="getPosterFile" @onSuccess="uploadSuccessCallback" fileType="bgImage" @handleRemove="handleRemovePoster" width="180px" height="255px" :isUploadS3="true" :cropper="true" :showCropper="true" cropperType="image/jpeg" :maxSize="5">
									<div v-if="showUpload" class="el-upload--picture-card" style="width: 100%;height: 100%;">
										<div class="file-empty">
											<i class="el-icon-delete"></i>
											<h4>{{$t('user_data.uploadPage')}}</h4>
										</div>
									</div>
								</sc-upload>
								<div class="uploadTips">{{ $t('short_data.uploadText') }}</div>
							</div>
							<div class="detailposter">
								<sc-upload v-model="form.coverHorizontalPicture" title="Upload" :disabled="disabled" :action="action" @getFile="getHorizonPosterFile" @onSuccess="horizonUploadSuccessCallback" fileType="bgImage" @handleRemove="handleRemoveHorizonPoster" width="250px" height="141px" :isUploadS3="true" :cropper="true" :showCropper="true" cropperType="image/jpeg" :maxSize="5">
									<div v-if="showUpload" class="el-upload--picture-card" style="width: 100%;height: 100%;">
										<div class="file-empty">
											<i class="el-icon-delete"></i>
											<h4>{{$t('user_data.uploadPage')}}</h4>
										</div>
									</div>
								</sc-upload>
								<div class="uploadTips">{{ $t('short_data.video.imgTips') }}</div>
							</div>
						</div>
					</el-form-item>
					<!-- <sc-cropper v-if="form.coverPicture" :src="form.coverPicture" ></sc-cropper> -->
					<!-- <el-form-item :label="$t('short_data.video.labelShortType')" prop="previewVhType">
						<el-select v-model="form.previewVhType" :filter-method="searchCreator" :disabled="disabled">
							<el-option v-for="item in vhTypeList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.preview')" prop="previewId" >
						<sc-upload-file ref="scuploadfile" v-model="form.previewId" :title="$t('user_data.uploadPage')" :disabled="disabled||showUpload" :limit=1 :action="previewAction" @removeFile="handleRemovePreview" fileType="previewVideo" type="8" @onSuccess="headCallPreview" :isUploadS3="true"></sc-upload-file>
					</el-form-item> -->
					<el-form-item :label="$t('short_data.form.description')" prop="description.en_US" >
						<el-input type="textarea" rows="6" resize="none" v-model="form.description.en_US" clearable :placeholder="$t('artwork_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="description.ja_JP" >
						<el-input type="textarea" rows="6" resize="none" v-model="form.description.ja_JP" clearable :placeholder="$t('artwork_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="description.zh_CN" >
						<el-input type="textarea" rows="6" resize="none" v-model="form.description.zh_CN" clearable :placeholder="$t('artwork_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="description.zh_TW" >
						<el-input type="textarea" rows="6" resize="none" v-model="form.description.zh_TW" clearable :placeholder="$t('artwork_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
					<!-- 副描述 -->
					<el-form-item :label="$t('short_data.form.intro')" prop="intro.en_US" >
						<el-input type="textarea" rows="4" resize="none" v-model="form.intro.en_US" clearable :placeholder="$t('artwork_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="intro.ja_JP" >
						<el-input type="textarea" rows="4" resize="none" v-model="form.intro.ja_JP" clearable :placeholder="$t('artwork_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="intro.zh_CN" >
						<el-input type="textarea" rows="4" resize="none" v-model="form.intro.zh_CN" clearable :placeholder="$t('artwork_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="intro.zh_TW" >
						<el-input type="textarea" rows="4" resize="none" v-model="form.intro.zh_TW" clearable :placeholder="$t('artwork_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
				</div>
			</el-form>
		</div>
		<div class="formdata" v-if="step==1&&$route.query.shortId&&showUploadBox">
			<scShort @saveDraft="saveDraft" @saveForm="saveForm" :allForm="form" ref="shortItems"></scShort>
		</div>
		<div class="tablebox" v-if="step==2">
			<div class="el-form-item--default" style="font-size: 14px;">{{ $t('short_data.video.discountPrice') }}<span style="color: #888;">{{$t('short_data.video.discountTips')}}</span></div>
			<div v-for="(data,index) in tableList" :key="index" class=tablebox-item>
				<scTable ref="table" apiObj="" :data="data.episodes" row-key="id" stripe border :header-cell-style="{'text-align':'center',background: '#EAC97C',color: '#666'}" :hidePagination="true" :isDIY="true" :hideSetting="true" :hideRefresh="true">
					<el-table-column :label="$t('short_data.video.tableTitle',{num: data.episodeNum,percent: data.episodeRate+'%'})" align="center" :cell-style="{background: '#FFF3D7'}">
						<el-table-column :label="$t('short_data.video.episodes')" width="auto"  align="center">
							<template #default="scope">
								{{ scope.row.startNum+'-'+scope.row.endNum }}
							</template>
						</el-table-column>
						<el-table-column :label="$t('short_data.video.tablePrice')" width="auto" prop="price" align="center">
						</el-table-column>
						<el-table-column :label="$t('short_data.video.tableDis')" width="auto" prop="disPrice" align="center">
						</el-table-column>
					</el-table-column>
				</scTable>
				
			</div>
		</div>
		<div id="footer">
			<el-button v-if="$route.query.type!='detail'" @click="saveDraft()">{{$t('table_data.saveDraftText')}}</el-button>
			<el-button v-if="$route.query.type=='detail' && $route.query.step != 2" @click="nextPage">{{$t('short_data.form.nextBtn')}}</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()" v-if="!disabled">{{($route.query.step==1?$t('table_data.submitForReview'):$t('short_data.form.nextBtn'))}}</el-button>
			<el-button :loading="isSaveing" @click="closeTag" v-if="step==2 && $route.query.type != 'detail'">{{$t('short_data.closepage')}}</el-button>
			<el-button type="primary" :loading="isSaveing" @click="publishVideo" v-if="step==2 && $route.query.type != 'detail'">{{$t('table_data.availableText')}}</el-button>
		</div>
	</div>
</template>

<script>
import  { shorts } from '@/mixin/shorts'
// import { uploadMixins } from '@/mixin/uploadMixins'
// import sCDialog from "@/components/scDialog"
import scShort from "@/components/scShorts"
// import scCropper from '@/components/scCropper'
// import MyWorker from '@/utils/worker.js';

	export default {
		emits: ['success', 'closed'],
		components: {
			// sCDialog,
			scShort,
			// scCropper
		},
		mixins: [shorts],
		data() {
			return {
				selectAll: true,
				langKeyList: [
					{
						type: 'ja_JP',
						name: this.$t('short_data.ja_JP')
					},
					{
						type: 'zh_CN',
						name:	this.$t('short_data.zh_CN')
					},
					{
						type: 'zh_TW',
						name: this.$t('short_data.zh_TW')
					}
					
				],
				step: 0,
				createFileId: '',
				showUploadBox: false,
				image: null,
				worker: null,
			}
		},
		watch: {
			step: {
				handler: function (e) {
					this.disabled = e == 2||this.$route.query.type=='detail'?true:false;
				},
				immediate: true,
				deep: true
			}
			// "scDialogData": {
      // 	handler: function (val) {
			// 		// if(val.isDefense)this.getBlob()
			// 	},
			// 	immediate: true,
     	// 	deep: true // 可以深度检测到 person 对象的属性值的变化
			// }
		},
		computed: {
			setTitle() {
				return function(title) {
					if(title&&this.$i18n.locale)return title[this.$i18n.locale];
				}
			},
			icon() {
				// return function(){
					const dUrl = decodeURIComponent(this.form.fileUrl);
					const str = dUrl.split('?')[0].split('.');
					const type = str[str.length-1];
					if(type){
						if(['jpg','jpeg','png','gif','webp','tiff','bmp','heif','svg'].includes(type)){
							return 'sc-icon-img'
						}else if(['mp3','wma','ape'].includes(type)){
							return 'sc-icon-mp3'
						}else if(['mp4','mp5','avi','wmv'].includes(type)){
							return 'sc-icon-video'
						}else if(['pdf','txt','xlsx'].includes(type)){
							return 'sc-icon-pdf'
						}else{
							return 'sc-icon-none'
						}
					}
					return 'sc-icon-none'
				// }
			},
			oicon(){
				return function(e){
					return e
				}
			},
		},
		created(){
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('menu.shortDetail'):this.$t('menu.shortEdit'))
			this.step = Number(this.$route.query.step || 0);
			this.$nextTick(async ()=>{
				this.getAreaList();
				this.getMovieTypeList();
				this.getCreator('');
				this.getCategoryList();
				await this.getFormalInfo();
				await this.getDraftInfo();
				await this.getTagsList();
			})
		},
		mounted() {
			// // worker处理事务
			// this.worker = new MyWorker();
			// this.worker.onmessage = (e) => {
			// 	// this.result = e.data;
			// 	console.log('worker message：', e.data);
			// };
			// this.worker.onerror = (e) => {
			// 	console.error('Worker error:', e.message);
			// };
		},
		methods: {
			changeAreaStatus(e) {
				if(!this.selectAll||e==2)this.handleSelectAllChange(false);
				if(this.selectAll)this.handleSelectAllChange(true);
			},
			changePending(e) {
				if(e) {
					this.form.startDate = "3000-01-01 00:00:00";
					this.form.endDate = "3001-01-01 00:00:00";
				} else {
					this.form.startDate = "";
					this.form.endDate = "";
				}
			},
			// sendMessage() {
			// 	if (this.worker) {
			// 		this.worker.postMessage('Hello from main thread');
			// 	}
			// },
			handleSelectAllChange(e) {
				if(e) {
					this.form.viewAreas = [{
            "areas": "{\"provinceId\":\"\",\"provinceName\":{\"en_US\":\"\",\"ja_JP\":\"\",\"zh_CN\":\"\",\"zh_TW\":\"\"},\"cityId\":\"\",\"cityName\":{\"en_US\":\"\",\"ja_JP\":\"\",\"zh_CN\":\"\",\"zh_TW\":\"\"},\"areaId\":\"\",\"areaName\":{\"en_US\":\"\",\"ja_JP\":\"\",\"zh_CN\":\"\",\"zh_TW\":\"\"}}",
            "countryName": {"en_US": "ALL", "ja_JP": "全て", "zh_CN": "全部", "zh_TW": "全部" },
            "countryCode": "*",
						"restrictStatus": this.form.restrictStatus
					}]
				} else {
					this.viewAreas = [];
					this.form.viewAreas = [];
				}
			},
			changeTags(data) {
				this.form.tags = [];
				for(let i=0;i < data.length;i ++) {
					this.form.tags.push(
						{
							"tagId": data[i],
							"sequence": i+1
						}
					);
				}
				console.log(this.form.tags);
			},
			changeAreas(data) {
				this.form.viewAreas = [];
				for(let i=0;i < data.length;i ++) {
					for(let j=0;j < this.localeList.length;j ++) {
						if(data[i] == this.localeList[j].country) {
							this.form.viewAreas.push(
								{
									"areas": "{\"provinceId\":\"\",\"provinceName\":{\"en_US\":\"\",\"ja_JP\":\"\",\"zh_CN\":\"\",\"zh_TW\":\"\"},\"cityId\":\"\",\"cityName\":{\"en_US\":\"\",\"ja_JP\":\"\",\"zh_CN\":\"\",\"zh_TW\":\"\"},\"areaId\":\"\",\"areaName\":{\"en_US\":\"\",\"ja_JP\":\"\",\"zh_CN\":\"\",\"zh_TW\":\"\"}}",
									"countryName": {
										"en_US": this.localeList[j].en_US,
										"ja_JP": this.localeList[j].ja_JP,
										"zh_CN": this.localeList[j].zh_CN,
										"zh_TW": this.localeList[j].zh_TW
									},
									"countryCode": data[i],
									"restrictStatus": this.form.restrictStatus
								}
							);
							break;
							// this.viewAreas.push(data[i]);
						}
					}
				}
				// console.log(this.form.viewAreas, this.viewAreas,this.localeList);
			},
			changeProductions(data) {
				this.form.productions = [];
				for(let i=0;i < data.length;i ++) {
					this.form.productions.push(
						{
							"productionId": data[i],
							"sequence": i+1
						}
					);
				}
				console.log(this.form.productions);
			},
			async getMovieTypeList() {
				const params = {
					pageNum: 1,
					pageSize: 100
				};
				const res = await this.$API.shorts.fetchMovTypeList.get(params);
				this.movTypeList = res.data.list;
				
			},
			async getAreaList(value = '') {
				const params = {
					pageNum: 1,
					pageSize: 250,
					keyword: value
				};
				const res = await this.$API.shorts.fetchAreaList.get(params);
				this.productionsList = res.data.list;
				
			},
			async getTagsList() {
				const params = {
					pageNum: 1,
					pageSize: 100
				};
				const res = await this.$API.shorts.fetchTagsList.get(params);
				this.tagsList = res.data.list;
				
			},
      selName(e,index){
        if(index==1)this.form.directors[e]=''
        if(index==2)this.form.writers[e]=''
        if(index==3)this.form.casts[e]=''
        if(index==4)this.form.updateWeekday[e]=''
      },
			async getCategoryList() {
				const res = await this.$API.shorts.fetchCategory.get({pageNum: 1,pageSize: 100});
				this.categoryList = res.data.list;
			},
			selectCreator(e){
				this.form.creatorId = e;
			},
			searchCreator(e){
				this.getCreator(e)
			},
			async searchArea(e) {
				this.getAreaList(e);
			},
			async getCreator(name=''){
				const params = {
					pageNum: 1,
					pageSize: 10,
					status: 1,
					userType: 2,
					keyword: name
				}
				const res = await this.$API.user.searchUser.get(params)
				this.creatorIdList = res.data.list.map(n=>({
					value: n.id,
					name: n.title
				}))
			},
			saveForm(data={}){
				Object.assign(this.form,data)
				// console.log('内存form data:',this.form,data)
			},
			async getFormalInfo(){
				if(this.$route.query.id == 'add' || (!this.$route.query.shortId && this.$route.query.type != 'copy')){
					return
				}
				this.showUpload = false;
				let id = this.$route.query.shortId;
				if(this.$route.query.type == 'copy')id=this.$route.query.copyShortId
				const api = this.$API.shorts.shortDetail
				const res = await api.get(id);
				Object.assign(this.form,res.data)
				if(this.step == 1 && !this.$route.query.id) {
					Object.assign(this.form, this.draftForm);
					this.showUploadBox = true;
				}
				if(this.form.casts==null)this.form.casts={en_US: '', ja_JP: null,zh_CN: null,zh_TW: null};
				if(this.form.directors==null)this.form.directors={en_US: '', ja_JP: null,zh_CN: null,zh_TW: null};
				if(this.form.writers==null)this.form.writers={en_US: '', ja_JP: null,zh_CN: null,zh_TW: null};
				if(this.step == 2)this.tableList = this.form.discounts
				this.form.tags = this.handleList(this.form.tags);
				this.tags = this.form.tags.map(n=>n.tagId);
				this.viewAreas = this.form.viewAreas.map(n=>n.countryCode);
				try {
					this.form.viewAreas = this.form.viewAreas.map(item => ({
						...item,
						countryName: typeof(item.countryName) == 'string' ? JSON.parse(item.countryName) : item.countryName
					}));
					this.selectAll = this.form.viewAreas.some(n=>n.countryCode == '*');
				} catch(e) {
					console.warn(e);
				}
				this.form.productions = this.handleAreaList(this.form.productions);
				this.productions = this.form.productions.map(n=>n.productionId);
				if(this.$route.query.type=='copy' && this.step == 0) {
					this.form.id = null;
					this.form.shortId = null;
					this.form.drama = [];
					this.form.coverPicture = "";
					this.form.coverPictureId = "";
					this.form.coverHorizontalPicture = "";
					this.form.coverHorizontalPictureId = "";
				}
				console.log('获取正式详情',this.form)
			},
			async getDraftInfo(){
				if(this.$route.query.id == 'add' || !this.$route.query.id){
					return;
				}
				let id = this.$route.query.id;
				const api = this.$API.shorts.draftDetail
				const res = await api.get(id);
				this.draftForm = JSON.parse(res.data.draftText);
				if(this.$route.query.shortId) {
					if(!this.draftForm)this.draftForm = {};
					this.draftForm.coverPicture = this.form.coverPicture;
					this.draftForm.coverPictureId = this.form.coverPictureId;
					this.draftForm.coverHorizontalPicture = this.form.coverHorizontalPicture;
					this.draftForm.coverHorizontalPictureId = this.form.coverHorizontalPictureId;
				}
				Object.assign(this.form, this.draftForm);
				this.form.tags = this.handleList(this.form.tags);
				this.tags = this.form.tags.map(n=>n.tagId);
				this.viewAreas = this.form.viewAreas.map(n=>n.countryCode);
				// 重新映射viewArea
				try {
					this.form.viewAreas = this.form.viewAreas.map(item => ({
						...item,
						countryName: typeof(item.countryName) == 'string' ? JSON.parse(item.countryName) : item.countryName
					}));
					this.selectAll = this.form.viewAreas.some(n=>n.countryCode == '*');
				} catch(e) {
					console.warn(e);
				}
				this.form.productions = this.handleAreaList(this.form.productions);
				this.productions = this.form.productions.map(n=>n.productionId);
				this.showUploadBox = true;
				if(this.form.drama) {
					for(let i = 0; i < this.form.drama.length; i ++) {
						if(!this.form.drama[i].videoFile && !this.form.drama[i].videoFileKey) {
							this.form.drama.splice(i, 1);
						}
					}
				}
				console.log('获取草稿详情',this.form)
			},
			mapData(a, b) {
				// 创建一个映射表，以便快速查找
				const countryCodeMap = new Map(a.map(item => [item.country, item]));
				// 构建新的结果数组
				const result = b.map(item => {
					const countryData = countryCodeMap.get(item.countryCode);
					if (countryData) {
						return {
							countryCode: item.countryCode,
							restrictStatus: this.form.restrictStatus,
							countryName: {
								en_US: countryData.en_US,
								ja_JP: countryData.ja_JP,
								zh_CN: countryData.zh_CN,
								zh_TW: countryData.zh_TW
							}
						};
					} else {
						// 如果没有找到对应的国家数据，可以返回空值或其他默认值
						return {
							countryCode: item.countryCode,
							restrictStatus: this.form.restrictStatus,
							countryName: {
								en_US: "",
								ja_JP: "",
								zh_CN: "",
								zh_TW: ""
							}
						};
					}
				});
				return result;
			},
			// 解析list数据返回id和name
			handleList(list) {
				return list.map((n, i) => ({
				  tagId: n.tagId,
					sequence: i+1
				}))
			},
			handleAreaList(list) {
				return list.map((n, i) => ({
				  productionId: n.productionId,
					sequence: i+1
				}))
			},
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			// 保存草稿
			async saveDraft(response = {}, callback){
				let api = this.$API.shorts.saveDraftUpload;
				if(Object.keys(response).length==0)response=this.draftForm;
				let form = {};
				let fileList = {};
				if(this.step == 1)fileList={drama: this.$refs.shortItems.fileList};
				form = JSON.stringify(Object.assign(form, this.form, this.draftForm, response, fileList));
				let id = null;
				console.log('保存草稿', form, response, this.draftForm, fileList)
				if(this.$route.query.id!='add')id = this.$route.query.id
				var res = await api.post({id: id,draftText: form});
				if(res.code == "OK"){
					this.$message.success(this.$t('short_data.video.saveDraft'))
					if(res.data){
						if(!id){
							// this.closeTag();
							// if(this.$route.query.id)this.$route.query.id = res.data.temp.id;
							// this.$router.push({path:'/shortTable/short/client/save',query:{type:'edit','id':res.data.temp.id}})
							this.draftId = res.data.temp.id;
						} else {
							// if(this.step!=1)this.getDraftInfo();
							// if(callback)callback(res)
						}
					}else if(res.data.shortId){
						return res.data
					}
					if(callback)callback(res)
				}
			},
			// 上架视频
			async publishVideo(){
				let api = this.$API.shorts.publishVideo;
				let shortId = this.$route.query.shortId;
				await api.get(shortId);
				this.$message.success(this.$t('table_data.operasucc'))
				this.closeTag();
			},
			nextPage() {
				this.$router.push({path:'/shortTable/short/client/save',query:{type: 'detail', 'id': this.$route.query.id, shortId: this.$route.query.shortId, step: ++this.step }});
			},
			//表单提交方法
			submit(){
				if(this.step == 1) {
					this.uploadInfo();
				} else {
					this.$refs.brandForm.validate(async (valid) => {
						console.log(this.form);
						if (valid) {
							this.uploadInfo();
						}
					})
				}
			},
			async uploadInfo() {
				try {
					try {
						await this.saveDraft(this.form);
					} catch(e) {
						console.warn(e);
					}
					this.isSaveing = true;
					const form = Object.assign({}, this.form);
					form.id = (this.$route.query.id=='add' ? null : this.$route.query.id);
					form.shortId = this.$route.query.shortId || null;
					if(form.drama) {
						for(let i=0;i<form.drama.length;i++) {
							form.drama[i].srtInitLang = form.drama[i].srtInitLang ? (form.drama[i].srtInitLang=='en'?'en-US':form.drama[i].srtInitLang) :'en-US';
							if(typeof(form.drama[i].fpsList) == 'object'){
								form.drama[i].fpsList = JSON.stringify(form.drama[i].fpsList);
							}
						}
					} else {
						form.drama = [];
					}
					let api = this.$API.shorts.shortCreate;
					const res = await api.post(form);
					this.isSaveing = false;
					if(res.code == 'OK'){
						this.closeTag();
						this.$router.push({path:'/shortTable/short/client/save',query:{type: 'edit', 'id': res.data.tempId || this.draftId, shortId: res.data.shortId, step: ++this.step }});
						if(this.step == 1){
							Object.assign(this.form, this.draftForm);
							this.showUploadBox = true;
						}
						// if(this.step == 1)this.saveDraft({drama: res.data.drama}); //正式数据同步到草稿，可能导致草稿必要数据丢失 待测试
					}else{
						this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'});
					}

				} catch(e) {
					console.warn(e);
					this.isSaveing = false;
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
.scTable {width: 50%;}

.item-add {
	display: flex;
	width: 100%;
	align-items: center;
	.detail-add {
		font-size: 30px;
		margin-left: 10px;
		cursor: pointer;
	}
}
.picbox {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-between;
}
.homeposter {
	width: 180px;
}
.detailposter {
	width: 250px;
}
.userbox {
	background: #fff;
	padding: 30px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
.formdata {
	margin-top: 50px;
}
.grid-content {
	border: 1px solid #eee;
	font-size: 14px;
	min-height: 50px;
	/* line-height: 50px; */
	padding-left: 12px;
	display: flex;
  align-items: center;
}
.bg-purple {
	background: #F6F8F9;
	color: #888;
	display: flex;
  align-items: center;
}
:deep .el-step__head.is-process {
	color: #BB9B51 !important;
	border-color: #BB9B51 !important;
}
:deep .el-step {
	cursor: pointer;
}
/* :deep .el-step__head.is-success {
	color: #BB9B51 !important;
	border-color: #BB9B51 !important;
} */

.el-col-list {
	flex: 0 0 33.3%;
}
.bg-purple-light {
	color: #000;
}
.el-form {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.box-card {
	width: 100%
}
:deep .el-upload-list {
	max-height: 150px;
  overflow-y: scroll;
}
:deep .el-transfer {
    width: 80%;
  margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
:deep .el-transfer-panel__filter {
    width: 93%;
}
.chooseCinemabox-title {
    font-size: 20px;
  margin: 0 auto 20px;
}
.chooseCinemabox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 85%; */
    margin: 0 auto 30px;
    font-size: var(--el-form-label-font-size);
}
:deep .el-transfer-panel {
    width: 40%;
}
.scrollbox {
	width: 100%;
	overflow-y: scroll;
	display: flex;
	max-height: 400px;
	flex-wrap: wrap;
}
.scrollbox-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #eee;
	margin: 0 10px 10px 0;
}
.sortNuminput {
	display: flex;
}
/* .scrollbox div {
	margin-right: 10px;
} */
.scrollbox .uImg {
	width: 200px;
	height: auto;
	/* height: 400px; */
  /* object-fit: contain; */
}
.left-side, .right-side {
	width: 46%;
}
.uploadbtn {
	cursor: pointer;
}
.uploadbtn:hover {
	color: var(--el-color-primary);
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.tips {
	color: #888;
	font-size: 14px;
	width: 100%;
}
.uploadTips {
	width: 100%;
	/* line-height: 200px; */
	color: #888;
	font-size: 14px;
}
.del {
	padding-top: 8px;
	font-size: 22px;
	color: red;
	cursor: pointer;
}

.datebox {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.datebox_left,.datebox_right {
	width: 50%;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 118px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 120px;
}
.el-select {
	width: 100%;
}
.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	/* height: 200px; */
	width: 100%;
	margin-bottom: 18px;
}
.item-desc {
	/* height: 500px; */
}
.icon {
	width: auto;
  height: 40px;
}
.item-right{
	height: 140px;
}
.head {
	width: 500px;
  height: 281px;
}
.background {
	width: 500px;
	height: 300px;
}
.rightInput {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	width: 100%;
}
.textarea {
	height: 600px;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}


@media only screen and (max-width: 750px) {
	.left-side, .right-side {
		width: 100%;
	}
	.el-form {
		flex-wrap: wrap;
	}
}
</style>
